<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频列表</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css"/>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="../css/pagination.min.css">
    <script src="../js/pagination.js"></script>
    <script src="../js/tool/upload-access.js"></script>
</head>

<style>
    .item {
        width: 24%;
        border: solid 1px #8D8D8D;
        padding: 2px;
        float: left;
        margin-top: 10px;
    }

    .item-video {
        height: 100%;
        width: 100%;
        margin: 5px;
    }

    .videoName {
        position: relative;
        text-align: center;
    }

    .video-pic {
        height: 100%;
        width: 100%;
    }

    a :hover {
        color: red;
    }

    .searchButton {
        margin-left: 10px;
        width: 5%;
        height: 35px;
    }
</style>
<body>
<div>
    <div id="title" class="layui-text" style="text-align: center; margin-top: 20px; font-size: larger; color: darkred;">
        <input type="text" id="searchText" placeholder="可在此处检索标题" autocomplete="off"
               style="width: 60%;margin-left: 15px; height: 30px;" onkeydown="keyDown(event)"/>
        <button id="search-button" type="button" class="searchButton" onclick="refreshVideoData()">搜索</button>
    </div>
    <div id="video-list">
        <div class="item">
            <a href="videoDetail.html?videoUrl=https://video.jializyw.com:8800/20200714/8ePgbAI8/index.m3u8">
                <div class="item-video">
                    <img src="https://img.lovebuy99.com/uploads/allimg/200613/15-2006131R237-50.jpg" class="video-pic"
                         alt=""/>
                    <div class="videoName">视频标题</div>
                </div>
            </a>
        </div>
        <div class="item">
            <div class="item-video">
                <img src="https://img.lovebuy99.com/uploads/200920/15-200920003TSC.jpg" style="width: 100%;"/>
                <div class="videoName">视频标题</div>
            </div>
        </div>
        <div class="item">
            <div class="item-video">
                <img src="https://img.lovebuy99.com/uploads/200920/15-200920004QcQ.jpg" style="width: 100%;"/>
                <div class="videoName">视频标题</div>
            </div>
        </div>
        <div class="item">
            <div class="item-video">
                <img src="https://img.lovebuy99.com/uploads/allimg/200613/15-2006131R237-50.jpg" style="width: 100%;"/>
                <div class="videoName">视频标题</div>
            </div>
        </div>
    </div>
</div>
<!-- 分页 -->
<div id="pages">

</div>
</body>

<script>

    const baseUrl = window.location.protocol + "//" + window.location.host + "/videourl";
    let data = [
        {
            id: 1,
            videoName: "视频标题1",
            videoUrl: "https://video.jializyw.com:8800/20200714/8ePgbAI8/index.m3u8",
            videoPicUrl: "https://img.lovebuy99.com/uploads/allimg/200613/15-2006131R237-50.jpg"
        },
        {
            id: 1,
            videoName: "视频标题1",
            videoUrl: "https://video.jializyw.com:8800/20200714/8ePgbAI8/index.m3u8",
            videoPicUrl: "https://img.lovebuy99.com/uploads/200920/15-200920003TSC.jpg"
        },
        {
            id: 1,
            videoName: "视频标题1",
            videoUrl: "https://video.jializyw.com:8800/20200714/8ePgbAI8/index.m3u8",
            videoPicUrl: "https://img.lovebuy99.com/uploads/200920/15-200920004QcQ.jpg"
        },
        {
            id: 1,
            videoName: "视频标题1",
            videoUrl: "https://video.jializyw.com:8800/20200714/8ePgbAI8/index.m3u8",
            videoPicUrl: "https://img.lovebuy99.com/uploads/allimg/200613/15-2006131R237-50.jpg"
        }

    ];

    function getQueryVariable(variable) {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (let i = 0; i < vars.length; i++) {
            let pair = vars[i].split("=");
            if (pair[0] === variable) {
                return pair[1];
            }
        }
        return "";
    }

    /**
     * 重置video list
     * @param data
     */
    function reset(data) {
        let windowWidth = $(window).width();
        let height = "24%";
        if (windowWidth !== undefined || windowWidth !== "") {
            height = (windowWidth * 0.24);
            console.log("compute height : " + height);
        }
        let htmlStr = "";
        $.each(data, function (index, item) {
            console.log("item aprams:= " + encodeURI(item));
            htmlStr += '<div class="item" style="height: ' + height + 'px;">';
            htmlStr += '<a target="_blank" href="videoDetail.html?v=' + item.id + '">';
            htmlStr += '<div class="item-video">';
            htmlStr += '<img src="' + item.videoPicUrl + '" class="video-pic" style="max-height: ' + (height - 75) + 'px;" alt=" ' + item.videoName + '" target="_blank"/>';
            htmlStr += '<div class="videoName">' + item.videoName + '</div>';
            htmlStr += '</div></a></div>';
        });
        $("#video-list").html(htmlStr);
    }

    /**
     * 查询video list
     */
    function refreshVideoData() {
        // 获取数据
        resetDataByIndex(1);
    }

    /**
     * 统计 页面访问次数
     */
    function pageCount() {
        let pageCountUrl = baseUrl + "/common/page/count";
        $.get(pageCountUrl, function (res) {
            console.log(res);
        }, 'json');
    }
    $(function () {
        pageCount();
        resetDataByIndex(1);
        upload_info("", "TA-Access", 1)
    });

    function resetDataByIndex(index) {
        let searchText = $("#searchText").val();
        console.log("searchText= " + searchText);
        let sessionKey = "dasdasda";
        let getSessionIdUrl = baseUrl + "/photowall/gen/sessionId";

        $.get(getSessionIdUrl, function (res) {
            if (res.code === "200"){
                sessionKey = res.data;
                window.localStorage.setItem("sessionKey", sessionKey);
            }
        });

        let queryVideoListUrl = baseUrl + "/photowall/query/video/list?pageNo=" + index + "&pageSize=12" + "&name=" + searchText;
        //let queryVideoListUrl = "http://192.168.0.149:8080/photowall/query/video/list?pageNo=" + index + "&pageSize=12" + "&name=" + searchText;
        $.get(queryVideoListUrl, function (res) {
            if (res.code === "200") {
                /*let htmlStr = "";
                data = res.data.data;
                console.log(data);
                reset(data);*/
                let htmlStr = "";
                data = res.data;
                let total = data.count ;
                let pageNo = total % 12 === 0 ? total / 12 : (total / 12 ) + 1 ;
                let resourceData = data.data ;
                reset(resourceData);
                new Pagination({
                    element: '#pages',
                    type: 1,
                    pageIndex: index,
                    pageSize: 12,
                    pageCount: pageNo,
                    total: total,
                    jumper: true,
                    singlePageHide: false,
                    prevText: '上一页',
                    nextText: '下一页',
                    disabled: true,
                    currentChange: function(index) {
                        console.log("next... "+index);
                        resetDataByIndex(index);
                    }
                });
            }
        }, 'json');
    }
    function keyDown(event) {
        console.log(event);
        if (event.key === "Enter") {
            refreshVideoData();
        }
    }

</script>
</html>
